<template>
    <div>
         <n-input ref="nInputRef" v-if="showBool"
         @blur="updateModal"
          v-model:value="valueText"
         
          placeholder="请输入" />
        <div v-else @dblclick="showInput">
            {{valueText }}
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, computed, nextTick,watch} from 'vue'
//删除 模块
const handleDeleteModel = (item: any) => {}
const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  modelValue: {
    type: String,
    required: true,
  }
})
const showBool = ref(false)
const nInputRef = ref()
const valueText = ref("")
const showInput = () =>{
showBool.value = !showBool.value
if(showBool.value){
nextTick(()=>{
    valueText.value =  props.modelValue
    nInputRef.value.focus()
})
}

}


valueText.value =  props.modelValue
const updateModal = (item: any) => {
    showBool.value = !showBool.value
  emit('update:modelValue', valueText.value)
  emit('change', valueText.value)
  
}


const loading = ref(false)
const handleCancel = ()=>{
  emit('update:modelValue', false)
}
const handleSearch = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    emit('update:modelValue', false)
  }, 3000)
}
</script>

<style lang="scss" scoped>
@include go(Instrument) {
  height: calc(100vh - 40px);
}
</style>
